<template>
  <div class="json-format-outer">
    <div class="panel-outer chart-full">
      <div class="panel-inner" style="margin-right: 16px" ref="panelInnerRef">
        <div class="tool-bar">
          <Button type="primary" @click="formatLeft" class="mrs-8">格式化</Button>
          <Button @click="fillLeft" class="mrs-8">示例</Button>
          <Button @click="exportLeft" class="mrs-8">导出</Button>
          <RadioGroup v-model="sizeLeft" style="float: right">
            <Radio :label="4">4空格</Radio>
            <Radio :label="2">2空格</Radio>
          </RadioGroup>
        </div>
        <Input v-model="jsonLeft" type="textarea" :rows="rowSize" placeholder="请输入JSON..." />
      </div>
      <div class="panel-inner" style="">
        <div class="tool-bar">
          <Button type="primary" @click="formatRight" class="mrs-8">格式化</Button>
          <Button @click="fillRight" class="mrs-8">示例</Button>
          <Button @click="exportRight" class="mrs-8">导出</Button>
          <RadioGroup v-model="sizeRight" style="float: right">
            <Radio :label="4">4空格</Radio>
            <Radio :label="2">2空格</Radio>
          </RadioGroup>
        </div>
        <Input v-model="jsonRight" type="textarea" :rows="rowSize" placeholder="请输入JSON..." />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'JsonFormat',
  data() {
    return {
      jsonLeft: null,
      sizeLeft: 4,

      jsonRight: null,
      sizeRight: 4,

      rowSize: 15,
    };
  },
  methods: {
    _getDownloadUrl(text) {
      const BOM = '\uFEFF';
      // Add BOM to text for open in excel correctly
      if (window.Blob && window.URL && window.URL.createObjectURL) {
        const csvData = new Blob([BOM + text], { type: 'application/json' });
        return URL.createObjectURL(csvData);
      } else {
        return 'data:attachment/json;charset=utf-8,' + BOM + encodeURIComponent(text);
      }
    },
    formatLeft() {
      if (!this.jsonLeft) {
        return;
      }
      try {
        const jsonObj = JSON.parse(this.jsonLeft);
        this.jsonLeft = JSON.stringify(jsonObj, null, this.sizeLeft);
      } catch (error) {
        debugger;
      }
    },
    formatRight() {
      if (!this.jsonRight) {
        return;
      }
      try {
        const jsonObj = JSON.parse(this.jsonRight);
        this.jsonRight = JSON.stringify(jsonObj, null, this.sizeRight);
      } catch (error) {
        debugger;
      }
    },
    exportLeft() {
      const link = document.createElement('a');
      link.download = 'left.json';
      link.href = this._getDownloadUrl(this.jsonLeft);
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
    exportRight() {
      const link = document.createElement('a');
      link.download = 'right.json';
      link.href = this._getDownloadUrl(this.jsonRight);
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
    fillLeft() {
      this.jsonLeft = '{"example": true}';
    },
    fillRight() {
      this.jsonRight = '{"example": true}';
    },

    calcRowSize() {
      if (this.$refs.panelInnerRef) {
        const tmpHeight = this.$refs.panelInnerRef.clientHeight;
        this.rowSize = (tmpHeight - 40 - 10) / 21;
      }
    },
  },
  mounted() {
    this.calcRowSize();

    const _this = this;
    window.addEventListener('resize', () => {
      _this.calcRowSize();
    });
  },
  beforeDestroy() {
    window.removeEventListener('resize');
  },
};
</script>

<style scoped>
.panel-outer {
  display: flex;
  padding: 16px;
}

.panel-inner {
  width: calc(100% - 24px);
  height: 100%;
}

.tool-bar {
  /* display: flex; */
  height: 32px;
  line-height: 32px;
  margin-bottom: 8px;
}

.mrs-8 {
  margin-right: 8px;
}
</style>
